<!--首页页面-->
<!--<link rel="stylesheet" href="../homePageCss.css">-->
<template>
<div class="mainMenu-view">
  <el-container>
<!--    左边菜单-->
    <el-aside width="270px">
<!--      旅游产品分类-->
      <div class="tour-product">
        <div class="tour-product-title"> <i class="el-icon-loading"></i> 境内游</div>
        <div>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">凤凰古城</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">云南大理</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">昆明</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">丽江</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">西双版纳</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">九寨沟</el-link>
        </div>
        <div class="tour-product-title"><i class="el-icon-loading"></i> 境外游</div>
        <div>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">奥地利</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">马尔代夫</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">夏威夷</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">美国</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">瑞士</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">英国</el-link>
        </div>
        <div class="tour-product-title"><i class="el-icon-loading"></i> 海岛游</div>
        <div>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">北海道</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">巴厘岛</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">曼谷</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">普吉岛</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">塞班岛</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">香港岛</el-link>
        </div>
        <div class="tour-product-title"><i class="el-icon-loading"></i> 自驾游</div>
        <div>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">张家界</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">武当山</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">黄山</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">木兰天池</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">庐山</el-link>
          <el-link @click="$router.push('commodityPage')" target="_blank" :underline="false">农耕年华</el-link>
        </div>
      </div>
<!--按旅游时长分类-->
      <div class="tour-date" :underline="false">
        <div class="tour-date-title"> <i class="el-icon-loading"></i> 一日游</div>
        <div>
          <el-link  @click="$router.push('commodityPage')" target="_blank" :underline="false">古琴台</el-link>
          <el-link  @click="$router.push('commodityPage')" target="_blank" :underline="false">黄鹤楼</el-link>
          <el-link  @click="$router.push('commodityPage')" target="_blank" :underline="false">海洋世界</el-link>
          <el-link  @click="$router.push('commodityPage')" target="_blank" :underline="false">武汉东湖</el-link>
          <el-link  @click="$router.push('commodityPage')" target="_blank" :underline="false">木兰天池</el-link>
          <el-link  @click="$router.push('commodityPage')" target="_blank" :underline="false">汉正街</el-link>
          <el-link  @click="$router.push('commodityPage')" target="_blank" :underline="false">坝子岭</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">武汉欢乐谷</el-link>
        </div>
        <div class="tour-date-title"><i class="el-icon-loading"></i> 两日游</div>
        <div>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">澳门</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">烟台</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">仰光</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">约旦</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">伊朗</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">德国</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">缅甸</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">希腊</el-link>
        </div>
        <div class="tour-date-title"><i class="el-icon-loading"></i> 多日游</div>
        <div>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">北京</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">上海</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">加拿大</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">香港</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">海南</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">马尔代夫</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">韩国</el-link>
          <el-link  @click="$router.push('commodityPage')"  target="_blank" :underline="false">福建</el-link>
        </div>
        <img src="../assets/img/bb1.jpg" alt="">
        <img src="../assets/img/bb2.jpg" alt="">
        <img src="../assets/img/bb3.jpg" alt="">
      </div>
    </el-aside>
<!--    右边-->
    <el-main>
<!--      走马灯，登录-->
      <div style="overflow:auto">
<!--        走马灯-->
        <div class="block">
          <el-carousel style="height: 240px">
            <el-carousel-item v-for="(item,index) in blockImg" :key="index" >
              <img :src="item.imgUrl" alt="" @click="$router.push('commodityPage')">
            </el-carousel-item>
          </el-carousel>
        </div>
<!--        登录 用户信息-->
        <div  class="mainLogin" >
          <el-button type="success" icon="el-icon-user" @click="$router.push('/login')">登录</el-button>
          <el-button type="success" icon="el-icon-edit" @click="$router.push('/register')">注册</el-button>
          <div class="userInfo">
            <div style="border: 2px solid #caedb5;border-radius: 50%;width: 135px;height: 135px;text-align: center;margin:6px auto 5px">
              <i class="el-icon-user-solid" style="font-size: 115px;line-height: 125px;"></i>
            </div>

              <i class="el-icon-s-comment" style="font-size: 28px;float: left;margin-left: 20px;color:#6fb147 "></i>
              <i class="el-icon-question" style="font-size: 28px;float: right;margin-right: 20px;color:#6fb147"></i>



          </div>
        </div>
      </div >
      <!--         攻略动画-->
      <div class="tour-cartoom" >
        <ul style="width: 1440px" class="donghua">
          <li v-for="(item,index) in cartoom" :key="index" >
            <img :src="item.imgUrl" alt="" width="160px" height="88px"  @click="$router.push('commodityPage')">
            <a href="#" style="font-size: 13px;text-decoration: none;color: black;font-weight: 700"  @click="$router.push('commodityPage')">{{item.title}}</a><br>
            <span style="color: red">￥{{item.pri}}</span>
          </li>
        </ul>
      </div>
<!--      热门旅游项目-->
      <div>
        <div class="hotTour" v-for="(item,index) in hotTour" :key="index">
          <img :src="item.horImgurl" alt="" width="120px" height="75px" style="position: absolute;top: 10px;left: 0px"  @click="$router.push('commodityPage')">
          <p style="position: absolute;left: 130px;color: #6eaf48"  @click="$router.push('commodityPage')">{{item.hotTitle}}</p>
          <p style="position: absolute;left: 130px;top: 37px;font-size: 12px">
            <a href="" style="color: #2c3e50;text-decoration: none;">{{item.hotSynopsis}}</a>
          </p>
          <p style="position: absolute;left: 130px;top: 60px;font-size: 12px;color: #7c7c7c">
            本路线已有<span style="color: red">{{item.hotnum}}</span>人出游
          </p>
          <p style="position: absolute;left: 0px;top: 90px;color: #7d7d7d;font-size: 12px">产品编号：{{item.hotProductID}}</p>
          <p style="position: absolute;right: 10px;top: 30px;color: red">￥{{item.hotPrice}}元/每个人</p>
        </div>
      </div>
    </el-main>
  </el-container>
</div>
</template>

<script>
export default {
  name: "homePage",
  data(){
    return{
      //走马灯图片路径
      blockImg:[
        {imgUrl:require("../assets/img/tg.jpg")},
        {imgUrl:require("../assets/img/tg2.jpg")},
        {imgUrl:require("../assets/img/tg3.jpg")},
        {imgUrl:require("../assets/img/tg4.jpg")},
      ],
      //轮播信息
      cartoom:[
        {imgUrl:require("../assets/img/scroll1.jpg"),title:'海岛三日游',pri:231},
        {imgUrl:require("../assets/img/scroll2.jpg"),title:'海岛三日游',pri:231},
        {imgUrl:require("../assets/img/scroll3.jpg"),title:'海岛三日游',pri:231},
        {imgUrl:require("../assets/img/scroll4.jpg"),title:'海岛三日游',pri:231},
        {imgUrl:require("../assets/img/scroll5.jpg"),title:'海岛三日游',pri:231},
        {imgUrl:require("../assets/img/scroll6.jpg"),title:'海岛三日游',pri:231},
        {imgUrl:require("../assets/img/scroll7.jpg"),title:'海岛三日游',pri:231},
        {imgUrl:require("../assets/img/scroll8.jpg"),title:'海岛三日游',pri:231},
      ],
      //热门项目信息
      hotTour:[
        {horImgurl:require("../assets/img/cp1.jpg"),hotTitle:'[4日游]   厦门双飞4日游   交通工具（飞机）'
          ,hotSynopsis:"简介：住1晚鼓浪屿特色旅馆，1天自由活动",hotnum:5144,hotProductID:135356,hotPrice:1664},
        {horImgurl:require("../assets/img/cp2.jpg"),hotTitle:'[4日游]   厦门双飞4日游   交通工具（飞机）'
          ,hotSynopsis:"简介：住1晚鼓浪屿特色旅馆，1天自由活动",hotnum:5144,hotProductID:135356,hotPrice:1664},
        {horImgurl:require("../assets/img/cp3.jpg"),hotTitle:'[4日游]   厦门双飞4日游   交通工具（飞机）'
          ,hotSynopsis:"简介：住1晚鼓浪屿特色旅馆，1天自由活动",hotnum:5144,hotProductID:13535,hotPrice:1664},
        {horImgurl:require("../assets/img/cp4.jpg"),hotTitle:'[4日游]   厦门双飞4日游   交通工具（飞机）'
          ,hotSynopsis:"简介：住1晚鼓浪屿特色旅馆，1天自由活动",hotnum:5144,hotProductID:13535,hotPrice:1664},
        {horImgurl:require("../assets/img/cp5.jpg"),hotTitle:'[4日游]   厦门双飞4日游   交通工具（飞机）'
          ,hotSynopsis:"简介：住1晚鼓浪屿特色旅馆，1天自由活动",hotnum:5144,hotProductID:13535,hotPrice:1664},
        {horImgurl:require("../assets/img/cp6.jpg"),hotTitle:'[4日游]   厦门双飞4日游   交通工具（飞机）'
          ,hotSynopsis:"简介：住1晚鼓浪屿特色旅馆，1天自由活动",hotnum:5144,hotProductID:13535,hotPrice:1664},

      ]
    }
  }
}
</script>

<style>
.el-carousel__container{
  height: 240px;
}
</style>

<style scoped>

.el-col{
  border: 1px solid red;
}
.el-main{
  padding: 0px;
  margin-left: 10px
}

.el-link.el-link--default{
 display: inline-block;
  width: 82px;
  /*text-align: left;*/
  line-height: 30px;
}

.mainMenu-view{
  width: 1100px;
  margin:20px auto 0px;

}
.tour-product{
  width: 270px;
  height: 410px;
  background-image: url("../assets/img/conl (1).jpg");
  padding-top: 40px;
}
.tour-product-title{
  width: 250px;
  margin: auto;
  text-align: left;
  line-height: 35px;
  border-bottom: 1px solid #caedb5;
}
.tour-date{
  margin-top: 10px;
  width: 260px;
  height: 675px;
  border: 5px solid #caedb5;
  padding-top:5px ;
}
.tour-date-title{
  width: 250px;
  margin: auto;
  text-align: left;
  line-height: 35px;
  border-bottom: 1px solid #caedb5;
  /*border-top: 1px solid #caedb5;*/
}
.block{
  width: 540px;
  height: 240px;
  float: left;
}
.mainLogin{
  width: 260px;
  height: 240px;
  float: right;
}
.userInfo{
  width: 254px;
  border: 3px solid #caedb5;
  margin-top:10px ;
  height: 177px;
}
.el-button--success{
  width: 125px;
  font-size: 17px;
  border-radius: 0px;
}
.tour-cartoom{
  height: 155px;
  width: 818px;
  border: 1px #ccc solid;
  border-top: 3px #090 solid;
  margin: 10px 0;
  overflow: hidden;
  position: relative;
  text-align: left;
  line-height: 24px;
}

.tour-cartoom ul li{
  width: 160px;
  border-left:1px solid #ccc ;
  padding: 9px;
  height: 135px;
  float: left;
}
.donghua{
  position: absolute;
  animation: mz 40s linear 0s infinite;
}
@keyframes  mz {
  0%{
   left: 0px;
  }
  50%{
    left: -620px;
  }
  100%{
     left: 0px;
   }
}
/*热门旅游*/
.hotTour{
  border-bottom: 1px #ccc dashed;
  height: 100px;
  padding: 7px;
  position: relative;
}
</style>